import React, { memo,  useRef, useState } from 'react';
import { HeaderWrapper, SearchAreaWrapper } from '@/components/app-header/style'
import HeaderLeft from '@/components/app-header/c-cpns/header-left'
import HeaderCenter from '@/components/app-header/c-cpns/header-center'
import HeaderRight from '@/components/app-header/c-cpns/header-right'
import { shallowEqual, useSelector } from 'react-redux'
import classNames from 'classnames'
import useScrollPosition from '@/hooks/useScrollPosition'
import { ThemeProvider } from 'styled-components'

const AppHeader = memo(() => {

  // 内部组件状态
  const [isSearch, setIsSearch] = useState(false)
  const {headerConfig} = useSelector(state => {
    return ({
      headerConfig: state.main.headerConfig
    })
  }, shallowEqual)
  const {isFixed,isHome} = headerConfig;
  const prevY = useRef(0)

  // 监听滚动

  const {scrollY} = useScrollPosition();
  console.log(32323,scrollY)

  if ( !isSearch ) prevY.current = scrollY;
  if ( isSearch && Math.abs(scrollY - prevY.current) > 30 ) setIsSearch(false);
  // 透明度
  const isAlpha = isHome && scrollY === 0;
  console.log('isHome',isHome)
  console.log('isAlpha',isAlpha)

  return (
    <ThemeProvider theme={ {isAlpha} }>
      <HeaderWrapper className={ classNames({fixed: isFixed}) }>
        <div className="content">
          <div className="top">
            <HeaderLeft/>
            <HeaderCenter isSearch={ isSearch } searchBarClick={ () => setIsSearch(true) }/>
            <HeaderRight/>
          </div>
          {/*<div className="search-area"></div>*/ }
          <SearchAreaWrapper isSearch={ isSearch }></SearchAreaWrapper>
        </div>
        {
          // 搜索状态，展示遮罩
          isSearch && <div className="cover" onClick={ () => setIsSearch(false) }></div>
        }

      </HeaderWrapper>
    </ThemeProvider>
  );
});

export default AppHeader;
